<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-27 21:19:09
 * @LastEditTime: 2024-03-06 19:45:16
 * @FilePath: \env-manager-pc\src\views\document\manager\create\main_table\main.table.edit.vue
-->
<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { rules } from './page'
import { ModelType } from '@/types/common'
import type { ModelOpen } from '@/types/page'
import { useInitMainTableForm } from '@/views/document/manager/create/createHelper'
import { getMNCode, getPointCode } from '@/utils/dataHook'
import useEntStore from '@/store/modules/ent'

const emits = defineEmits(['submit'])

const { currentEntData } = useEntStore()
const enterpriseObjID = currentEntData?.baseInfo?.ObjID

const dialogVisible = ref(false)
const { formData, initForm } = useInitMainTableForm()
const formRef = ref<FormInstance>()
const btnLoading = ref(false)
const modelType = ref(ModelType.add)
function handleClose() {
  close()
}

const isReadOnly = computed(() => {
  return modelType.value === ModelType.readonly
})

const title = computed(() => {
  if (isReadOnly.value) {
    return '查看总表'
  }
  return formData.value.ObjID ? '编辑总表' : '新增总表'
})

async function open(options: ModelOpen) {
  modelType.value = options.type
  if (options.data) {
    formData.value = { ...options.data }
  }
  if (options.type === ModelType.add && enterpriseObjID) {
    formData.value.PointCode = await getPointCode(enterpriseObjID)
    formData.value.MN = await getMNCode(enterpriseObjID)
  }
  dialogVisible.value = true
  setTimeout(() => {
    formRef.value?.clearValidate()
  }, 250)
}

function doLoading(flag: boolean) {
  btnLoading.value = flag
}

function submit() {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      await emits('submit', formData.value, doLoading)
    }
  })
}

function close() {
  dialogVisible.value = false
  btnLoading.value = false
  initForm()
}

function changeCode() {
  if (formData.value.AssetCode) {
    formData.value.MN = formData.value.AssetCode
  }
}
async function refreshCode() {
  if (enterpriseObjID) {
    formData.value.MN = await getMNCode(enterpriseObjID)
  }
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    :title="title"
    width="30%"
    draggable
    @closed="handleClose"
  >
    <ElForm ref="formRef" :validate-on-rule-change="false" :model="formData" label-width="180px" label-position="top" label-suffix="：" :rules="rules">
      <ElRow :gutter="30">
        <ElCol :span="12">
          <ElFormItem label="总表名称" prop="Name">
            <ElInput v-model="formData.Name" :disabled="isReadOnly" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="资产号" prop="AssetCode">
            <ElInput v-model="formData.AssetCode" class="w-full" :disabled="isReadOnly" @change="changeCode" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="MN号" prop="MN">
            <ElInput v-model="formData.MN" class="w-full" :disabled="isReadOnly">
              <template v-if="!isReadOnly" #append>
                <el-button @click="refreshCode">
                  生成
                </el-button>
              </template>
            </ElInput>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="采集因子" prop="PointCode">
            <ElInput v-model="formData.PointCode" :disabled="isReadOnly" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="安装位置" prop="Location">
            <ElInput v-model="formData.Location" :disabled="isReadOnly" />
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-if="!isReadOnly" type="primary" :loading="btnLoading" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
